<template>
  <div class="balance">
    <div class="top">
      <router-link to="" @click.native="fanHui()">&lt;</router-link>
      <div class="top_title">结算</div>
    </div>
    <div class="suo_you">
      <router-link to="/Address" class="di_zi">
        <div>
          <span>地址</span>
          {{ dizi.name }}&nbsp;{{ dizi.phone }}
          <br />
          {{ dizi.city }}{{ dizi.dizi }}
        </div>
        <span>></span>
      </router-link>

      <div
        class="shang_ping"
        v-for="(item, index) in $store.state.arr1"
        :key="index"
      >
        <div class="pic_img">
          <img :src="item.img" alt="" />
        </div>
        <div class="sp_title">
          <router-link
            to="/Gdetails"
            @click.native="jumpXq(item.img, item.title, item.dazhe, item.price)"
            >{{ item.title }}</router-link
          >
          <div>
            <div>
              <span>￥{{ item.price }}</span>
            </div>
            <div>
              <span>x {{ item.num }}</span>

              <!-- <button
                @click="jsJian(item.img, item.title, item.num, item.price,item.flag)"
              >
                -
              </button>
              <span>{{ item.num }}</span>
              <button
                @click="jsJia(item.img, item.title, item.num, item.price)"
              >
                +
              </button> -->
            </div>
          </div>
        </div>
      </div>

      <div class="xi_jie">
        <ul>
          <li>
            <span>购物车小计</span>
            <span>￥{{ $store.getters.zongGong }}</span>
          </li>
          <li>
            <span>快递方式:</span>
            <div>
              <span>免费送货 ￥0 </span>
              <span>></span>
            </div>
          </li>
          <li>
            <span>优惠券:</span>
            <div>
              <span>不使用优惠券 </span>
              <span>></span>
            </div>
          </li>
          <li>
            <span>支付方式</span>
            <div>
              <span>微信支付 </span>
              <span>></span>
            </div>
          </li>
          <li>
            <span>买家留言</span>
            <input type="text" name="liu_yan" />
          </li>
        </ul>
      </div>
    </div>
    <div class="xia_dan">
      <div>
        <span>合计:</span>
        <span>￥{{ $store.getters.zongGong }}</span>
      </div>
      <span @click="xiaDan()">下单</span>
    </div>

    <div class="gou_mai" v-show="flag">{{ wenben }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: this.$route.params.id,
      flag: false,
      dizi: "",
      num: this.$route.params.num,
      wenben: "",
    };
  },
  methods: {
    fanHui() {
      window.history.go(-1);
    },
    jsJian(img, title, num, price, flag) {
      if (num > 1) {
        var jsShuju = {
          img: img,
          title: title,
          num: num,
          price: price,
          flag: flag,
        };
        this.$store.commit("jsJian", jsShuju);
      }
    },
    jsJia(img, title, num, price, flag) {
      var jsShuju = {
        img: img,
        title: title,
        num: num,
        price: price,
        flag: flag,
      };
      this.$store.commit("jsJia", jsShuju);
    },
    jumpXq(img, title, dazhe, price) {
      var xqShu = {
        img: img,
        title: title,
        title1: dazhe,
        title2: price,
      };
      localStorage.setItem("xqXx", JSON.stringify(xqShu));
    },
    xiaDan() {
      if (this.dizi != "") {
        if (this.id != "000") {
          var obj = [];
          for (var i = 0; i < this.$store.state.arr.length; i++) {
            if (!this.$store.state.arr[i].flag) {
              obj.push(this.$store.state.arr[i]);
            }
          }
          this.$store.commit("xiaDan", obj);
        }
        this.$axios
          .post("http://47.114.130.21:3000/yifuk", {
            params: {
              id: localStorage.getItem("id"),
              arr: this.$store.state.arr1,
            },
          })
         
          this.wenben = "购买成功!";
              this.flag = true;
              setTimeout(() => {
                this.flag = false;
                this.$router.push("/Dindan");
              }, 500);
        
      } else {
        this.wenben = "请填写地址!";
        this.flag = true;
        setTimeout(() => {
          this.flag = false;
        }, 500);
      }
    },
  },
  mounted() {
    if (this.num == undefined) {
      this.$axios
        .get("http://47.114.130.21:3000/jsdz", {
          params: {
            id: localStorage.getItem("id"),
            shibie: 1,
          },
        })
        .then((data) => {
          if (data.data.code == 200) {
            this.dizi = data.data.msg;
          }
        });
    } else {
      this.$axios
        .get("http://47.114.130.21:3000/jsdz", {
          params: {
            id: localStorage.getItem("id"),
            num: this.num,
            shibie: 2,
          },
        })
        .then((data) => {
          if (data.data.code == 200) {
            this.dizi = data.data.msg;
          }
        });
    }
  },
};
</script>

<style lang="less" scoped>
.balance {
  .gou_mai {
    background: rgba(216, 18, 48, 0.5);
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    color: #fff;
    font-size: 16px;
    border-radius: 5px;
  }
  .suo_you {
    margin-top: 45px;
    display: block;
    .di_zi {
      background: #ffffff;
      padding: 0px 0.266667rem;
      border-bottom: 1px solid #eeeeee;
      height: 1.733333rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      > span {
        color: #353535;
        font-family: cursive;
        font-size: 25px;
        margin-right: 0.133333rem;
      }
      > div {
        line-height: 0.666667rem;
        color: #353535;
        font-size: 14px;
        > span {
          background: #de0a2b;
          color: #ffffff;
          padding: 1px 0.133333rem;
        }
      }
    }
    .shang_ping {
      margin-top: 0.053333rem;
      background: #ffffff;
      padding: 0.133333rem 0.266667rem;
      width: 100%;
      display: flex;
      align-items: center;
      flex-flow: row;
      .pic_img {
        width: 20%;
        margin-right: 0.266667rem;
        padding: 0.133333rem;
        img {
          width: 100%;
        }
      }
      .sp_title {
        width: 80%;
        display: flex;
        flex-flow: column;
        justify-content: space-around;
        > a {
          line-height: 0.506667rem;
          font-size: 13px;
          color: #353535;
          margin-bottom: 0.133333rem;
        }
        > div {
          margin-top: 0.133333rem;
          display: flex;
          flex-flow: row;
          justify-content: space-between;
          align-items: center;
          > :first-child {
            font-size: 14px;
            color: #de0a2b;
          }
          > :last-child {
            display: flex;
            align-items: center;
            button {
              text-align: center;
              line-height: 0.56rem;
              outline: none;
              border: none;
              width: 0.56rem;
              height: 0.56rem;
              border-radius: 2px;
              background: #f1f1f1;
              color: #878787;
              font-size: 16px;
            }
            span {
              font-size: 14px;
              text-align: center;
              line-height: 0.56rem;
              display: inline-block;
              margin: 0px 0.133333rem;
              height: 0.56rem;
              width: 0.8rem;
            }
          }
        }
      }
    }
    .xi_jie {
      margin-top: 0.266667rem;
      > ul {
        width: 100%;
        > li {
          background: #ffffff;
          margin-top: 0.053333rem;
          padding: 0.346667rem 0.266667rem;
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 14px;
          > input {
            outline: none;
            border: 1px solid #cccccc;
            padding-left: 0.133333rem;
            height: 0.666667rem;
          }
          > span {
            color: #353535;
          }
          > div {
            > span {
              color: #353535;
            }
            > :last-child {
              font-family: cursive;
              font-size: 17px;
            }
          }
        }
      }
    }
  }
  .xia_dan {
    height: 50px;
    background: #ffffff;
    position: fixed;
    bottom: 0px;
    display: flex;
    justify-content: space-between;
    width: 100%;
    > span {
      height: 100%;
      font-size: 14px;
    }
    > :first-child {
      font-size: 14px;
      display: flex;
      flex-flow: row;
      justify-content: center;
      align-items: center;
      width: 33.33%;
      > :first-child {
        color: #353535;
      }
      > :last-child {
        color: #de0a2b;
      }
    }
    > :last-child {
      text-align: center;
      line-height: 50px;
      color: #ffffff;
      width: 33.33%;
      background: #e64461;
    }
  }
}
</style>